<!--首页的娱乐资讯-->
<template>
  <van-transition
    name="fade-left"
  >
    <div class="amuseBox" ﻿@tap="goPage('/amusement/detail?id=' + info.id)">
      <div class="amuse">
        <div class="imgBox">
          <img :lazy-load="true" :src="picPre + info.pic" alt="">
          <span>{{ info.class_name }}</span>
        </div>
        <div class="contentBox">
          <h1>{{info.name}}</h1>
          <p class="home-introduction">{{info.describe}}</p>
          <div class="count">
            <i class="iconfont" style="font-size: 22rpx;color: #F2716E;">&#xe608;</i>
            <span>{{info.click_num}} 人</span>
          </div>
        </div>
      </div>
    </div>
  </van-transition>
</template>

<script>
    export default {
        name: "index",
      props:{
          info:{
            type: Object
          }
      },
      data(){
        let that = this;
        return {
          picPre: that.$api.picPre,
        }
      },
      methods:{
        goPage(url){
			uni.navigateTo({
				url: url
			})
        }
      }
    }
</script>

<style scoped>
  .amuseBox{
    padding: 27rpx 0;
    border-bottom: 1rpx solid #EEEEEE;
  }
  .amuseBox:last-child{
    border: none;
  }
  .amuse{
    display: flex;
  }
  .imgBox{
    width: 214rpx;
    height: 272rpx;
    background: #EF5A56;
    border-radius:20rpx;
    overflow: hidden;
    text-align: center;
    margin-right: 30rpx;
  }
  .imgBox span{
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
  }
  .imgBox img{
    width: 214rpx;
    height: 212rpx;
    border-radius: 20rpx;
    vertical-align: middle;
  }
  .contentBox{
    padding: 11rpx 0;
    width: 442rpx;
  }
  h1{
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(50,50,50,1);
  }
  .contentBox>p{
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(101,101,101,1);
    line-height:38rpx;
  }
  .count{
    display: flex;
    align-items: center;
    margin-top: 17rpx;
  }
  .count>span{
    color: #EF5A56;
    font-size: 22rpx;
    margin-left: 10rpx;
  }
  .home-introduction{
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
     color: #656565;
     font-size: 24rpx;
     margin: 30rpx 0 20rpx;
   }

</style>
